class InfoDialog {
  private dialogEle: HTMLElement
  private titleEle: HTMLElement
  private infoEle: HTMLElement
  private confirmEle: HTMLElement
  constructor() {
    this.dialogEle = document.getElementById('dialog')!
    this.titleEle = document.getElementById('dialog-title')!
    this.infoEle = document.getElementById('dialog-info')!
    this.confirmEle = document.getElementById('dialog-confirm')!
    this.setVerVisible(false)
    //绑定事件
    this.bindingEvent()
  }

  /**
   * 设置标题
   * @param title
   */
  public setTitle(title: string) {
    this.titleEle.innerHTML = title
  }

  /**
   * 设置要显示的信息
   * @param info
   */
  public setInfo(info: string) {
    this.infoEle.innerHTML = info
  }

  /**
   * 设置对话框可见性
   * @param isShow
   */
  public setVerVisible(isShow: boolean, title?: string, info?: string) {
    if (info) {
      this.setInfo(info)
    }
    if (title) {
      this.setTitle(title)
    }
    if (isShow) {
      this.dialogEle.style.display = 'flex'
      this.dialogEle.classList.add('ani-fade-in')
      this.dialogEle.classList.remove('ani-fade-out')
    } else {
      this.dialogEle.classList.remove('ani-fade-in')
      this.dialogEle.classList.add('ani-fade-out')
      // this.dialogEle.style.display = 'none'
    }
  }
  /**
   * 绑定事件
   */
  private bindingEvent() {
    this.confirmEle.addEventListener('click', (ev) => {
      this.setVerVisible(false)
      ev.stopPropagation()
    })
    //按下回车键关闭对话框
    document.addEventListener('keyup', (ev) => {
      if (ev.code === 'Enter') {
        this.setVerVisible(false)
      }
    })
    //点击文档关闭对话框
    document.addEventListener('click', () => {
      this.setVerVisible(false)
    })
    this.dialogEle.addEventListener('click', (ev) => {
      ev.stopPropagation()
    })
  }
}

export default new InfoDialog()
